<template>
  <div>
    <el-card class="box-card" style="margin-bottom:10px;position:relative;">
      <div slot="header" class="clearfix">
        <span>服务器配置</span>
        <el-button style="float: right;" size="mini" @click="actionRefresh">刷新</el-button>
        <el-button style="float: right;margin-right:10px;" size="mini" @click="actionConfigurationSave">应用</el-button>
      </div>

      <el-tabs tab-position="left" value="common" @tab-click="actionTabChanged">
        <el-tab-pane v-for="(defination, defKey) in definations" :key="defKey" :label="defination.name" :name="defKey">
          <el-form label-position="top" v-if="null != config">
            <el-form-item v-for="(option, optKey) in defination.options" :key="optKey" :label="`${option.name} (${optKey})`">
              <el-input v-model="config.mysqld[optKey]"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="预览" name="raw">
          <div class="mysql-server-config-editor">
            <codemirror ref="configEditor" :value="configContent" :options="editorOptions"></codemirror>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { Loading } from 'element-ui';
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css";
require("codemirror/mode/shell/shell.js");
import MysqlOptionFileDefination from './MysqlOptionFileDefination.js'
import Common from '../../utils/Common.js'
import ini from 'ini'
export default {
    name : 'MysqlServerConfig',
    components : {
        codemirror,
    },
    data() {
        return {
            config : null,
            configOriginal : null,
            definations : null,
            configContent : null,
            editorOptions : {
                mode:'shell',
                theme: 'ambiance',
                readOnly:true,
                lineNumbers:true,
                lineWrapping:true,
                autofocus:true,
            },
        };
    },
    async mounted () {
        this.definations = MysqlOptionFileDefination.getDefinations();
        await this.configurationLoad();
    },
    methods : {
        // 加载配置文件
        async configurationLoad() {
            let server = this.$store.getters.serverCurrent;
            let configContent = await server.fileGetContent('/etc/mysql/mysql.conf.d/mysqld.cnf');
            this.config = ini.parse(configContent);
            this.configOriginal = JSON.parse(JSON.stringify(this.config));
            if ( Common.isVarEmpty(this.config.mysqld.port) ) {
                this.config.mysqld.port = '3306';
            }
            if ( Common.isVarEmpty(this.config.mysqld['bind-address']) ) {
                this.config.mysqld['bind-address'] = '127.0.0.1';
            }
        },
        
        // 应用配置
        async actionConfigurationSave() {
            let loading = Loading.service({ fullscreen: true, text:'正在更新...'});
            let configContent = this.generateConfigurationContent();
            console.log(configContent);
            let server = this.$store.getters.serverCurrent;
            await server.filePutContent('/etc/mysql/mysql.conf.d/mysqld.cnf', configContent);
            await server.exec('chmod 644 /etc/mysql/mysql.conf.d/mysqld.cnf');
            let response = await server.exec('systemctl restart mysql.service');
            loading.close();

            if ( 0 == response.trim().length ) {
                this.configOriginal = JSON.parse(JSON.stringify(this.config));
                return;
            }

            loading = Loading.service({ fullscreen: true, text:'服务器重启失败，正在恢复配置文件...'});
            this.config = JSON.parse(JSON.stringify(this.configOriginal));
            await this.actionConfigurationSave();
        },

        // 生成配置文件内容
        generateConfigurationContent() {
            let options = {};
            options.mysqld = {};

            for ( let option in this.config.mysqld ) {
                if ( !Common.isVarEmpty(this.config.mysqld[option]) ) {
                    options.mysqld[option] = this.config.mysqld[option];
                }
            }

            return ini.stringify(options);
        },
        
        // 标签切换时更新配置文件内容
        async actionTabChanged( tab ) {
            this.configContent = this.generateConfigurationContent();
            console.log(this.configContent);
            if ( 'raw' == tab.name ) {
                await Common.msleep(100);
                this.$refs.configEditor.cminstance.focus()
            }
        },

        // 刷新页面
        async actionRefresh() {
            await this.configurationLoad();
        },
    },
}
</script>
<style>
.mysql-server-config-editor .CodeMirror {height: 600px !important;}
</style>